<script setup>
import BlackCard from "@/components/card/BlackCard.vue";
import {reactive} from "vue";
import {createQRCode} from "@/api/api.js";
import {getUrlByResourceId} from "@/utils/common.ts";

let param = reactive({
  content: "",
  width: 240,
  writeText: false,
});
let url = '/img/qrcode_logo.png';
let urlList = reactive([
  '/img/qrcode_logo.png'
])
const create = () => {
  createQRCode(param).then(res => {
    url = getUrlByResourceId(res.resourceId);
    if (!urlList.includes(url)) {
      urlList.push(url);
    }
  })
}
</script>

<template>
  <div class="view-container">
    <black-card title="二维码生成">
      <el-form ref="form" :model="param" label-width="120px">
        <el-form-item label="二维码的内容">
          <el-input placeholder="输入要生成二维码的内容" @keyup.enter.native="create()" v-model="param.content">
            <el-button slot="append" icon="el-icon-plus" @click="create()"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="二维码的宽高">
          <el-input-number v-model="param.width" placeholder="请选择活动区域">
          </el-input-number>
        </el-form-item>
        <el-form-item label="是否绘制文字">
          <el-switch v-model="param.writeText"></el-switch>
        </el-form-item>
      </el-form>
      <div class="qr_code">
        <el-image id="image" :src="url" :preview-src-list="urlList">
          <template #error>
            <el-icon><Picture /></el-icon>
          </template>
        </el-image>
      </div>
    </black-card>
  </div>
</template>

<style scoped>
.qr_code {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .el-form-item {
    margin-bottom: 15px;
  }
  
  .el-form-item__label {
    font-size: 14px;
  }
  
  .qr_code {
    height: 300px;
  }
  
  #image {
    max-width: 80%;
    max-height: 80%;
  }
}

@media (max-width: 480px) {
  .el-form-item {
    margin-bottom: 10px;
  }
  
  .el-form-item__label {
    font-size: 12px;
    width: 100px !important;
  }
  
  .qr_code {
    height: 250px;
  }
  
  #image {
    max-width: 70%;
    max-height: 70%;
  }
  
  .el-input-number {
    width: 100%;
  }
}
</style>